<script>
export default {
  data() {
    const userJson = localStorage.getItem("user");
    let userId = '';
    if (userJson) {
      const user = JSON.parse(userJson);
      userId = user.id;
    }
    return {
      article: {},
      comments: [],// 添加这行代码
      commentForm: {
        articleId: '',
        user: userId,
        content: ''
      }
    }
  },
  created() {
    const {id} = this.$route.params;
    console.log(id);
    this.fetchArticleDetail(id);
    this.fetchComments(id);


  },
  methods: {
    fetchArticleDetail(id) {
      this.request.get('/article/front/findArticleDetailById/' + id)
          .then(res => {
            this.article = res.articleVo
            if (this.commentForm && this.article && this.article.id) {
              this.commentForm.articleId = this.article.id;
            } else {
              console.error('相关对象未被正确初始化，无法设置 questionId 属性');
            }
          });

    },
    fetchComments(id) {
      this.request.get('/articleComment/front/findCommentByArticleId/' + id)
          .then(res => {
            this.comments = res.commentVoList

          })
    },
    submitComment(){
      console.log(this.commentForm)
      this.request.post('/articleComment/save', this.commentForm)
          .then(res => {
            if (this.commentForm.content.length===0){
              this.$message.error('请输入留言内容')
            }
            if (res.code === 200) {
              this.$message.success('发布成功');
              // 重新获取评论列表
              this.fetchComments(this.article.id);
              this.commentForm.content=''
            } else {
              this.$message.error('发布失败');
            }
          });
    }
  }
}
</script>

<template>
  <div class="articledetail-wrapper">
    <div class="articledetail animate__animated animate__fadeInLeft">
      <div>
        <img :src="article.articleHover" alt="" style="height: 400px;width: 1000px;border-radius: 10px">
      </div>

      <el-input v-model="article.id" style="display: none;"></el-input>

      <div class="interactions-detail">
        <div class="browse">
          <img style="width: 25px; height: 25px;margin-bottom: -6px; background-color: transparent !important;"
               src="@/assets/images/browse.png" alt="">
          <span>{{ article.browerNumber }}</span>
        </div>

        <div class="like">
          <img
              style="width: 25px; height: 25px;margin-left: 5px; margin-bottom: -6px;background-color: transparent !important;"
              src="@/assets/images/like.png" alt="">
          <span style="margin-right: 10px">{{ article.likeNumber }}</span>
        </div>

        <div class="favorite">
          <img style="width: 25px; height: 25px;margin-bottom: -6px; background-color: transparent;"
               src="@/assets/images/collect.png" alt="">
          <span>{{ article.collectNumber }}</span>
        </div>
      </div>

      <h1 class="title">{{ article.articleTitle }}</h1>
      <div class="author">
        <span><i class="el-icon-user"></i> 作者：{{ article.nickName }}</span>
      </div>
      <div class="time">
        <span><i class="el-icon-date"></i>发布时间: {{ article.createTime }}</span>
      </div>
      <div class="articlecontent"  v-html="article.articleContent"></div>
      <h2>评论</h2>
      <div class="comments-section">

        <div class="comment" v-for="comment in comments" :key="comment.id">
          <div class="comment-author">
            <img :src="comment.avatar" alt="">
            <span>{{ comment.nickName }}</span>
            <span class="comment-time">{{ comment.createTime }}</span>
          </div>
          <div class="comment-content">{{ comment.content }}</div>
        </div>
      </div>

      <div class="new-comment-section">
        <el-input
            type="textarea"
            placeholder="请输入评论内容"
            v-model="commentForm.content"
            maxlength="200"
            rows="4">
        </el-input>
        <!-- 显示当前字数 / 总字数限制 -->
        <div style="margin-top: 5px; float: right; font-size: 14px; color: #999;">
          {{ commentForm.content.length }}/200
        </div>
        <el-button
            type="success"
            style="margin-top: 5px;margin-left: 420px"
            @click="submitComment()">发表评论</el-button>
      </div>

    </div>

  </div>
</template>

<style scoped>


.articledetail-wrapper {
  display: flex;
  justify-content: center;

}

.articledetail {
  max-width: 1000px;
  padding: 20px;
  margin-left: 10px;
}

.articledetail h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 5px;
}

.author,
.time {
  text-align: center;
  margin-bottom: 10px;
}

.articledetail .articlecontent {
  font-size: 16px;
  line-height: 1.8;
  border-radius: 5px;
  background-color: #FFFFFF;
}


.interactions-detail {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}

.interactions > div:not(:last-child) {
  margin-right: 10px; /*设置右侧间距为10px*/
}

/* 评论区域整体样式 */
.comments-section {
  background-color: #f9f9f9; /* 轻微的背景色，与主内容区分开 */
  margin-top: 20px;
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

/* 评论项样式 */
.comment {
  border-bottom: 1px solid #eaeaea; /* 更轻微的分割线 */
  padding: 15px 0; /* 增加垂直方向的内边距 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 设置为列布局 */
  align-items: flex-start; /* 对齐到起始边，适用于列布局 */
  margin-left: 20px;
}

.comment-author {
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保占满整个容器宽度 */
}

/* 移除.comment-header相关的样式，因为我们将直接在.comment-author内部处理布局 */

.comment-time {
  font-size: 0.9em;
  color: #999; /* 更淡的颜色，减少对主要内容的干扰 */
  margin-left: auto; /* 自动左边距，推到右侧 */
  padding-left: 10px; /* 时间和名字之间的间隔 */

}

.comment-author img {
  width: 50px; /* 头像尺寸 */
  height: 50px;
  border-radius: 50%;
  margin-right: 10px; /* 头像和作者名字间的间隔 */
}


.comment-author img {
  width: 50px; /* 头像尺寸 */
  height: 50px;
  border-radius: 50%;
  margin-right: 10px; /* 头像和作者名字间的间隔 */
}


/* 评论内容样式 */
.comment-content {
  margin: 5px 0;
  color: #333; /* 深色文字，提高可读性 */
  flex: 1; /* 让内容占据剩余空间 */
}

</style>